{% extends 'base.html' %}
{% load staticfiles %}
{% block css %}
    <link href="{% static 'editor/css/froala_style.css' %}" rel="stylesheet">
    <link href="{% static 'editor/css/froala_editor.pkgd.min.css' %}" rel="stylesheet">{% endblock %}
{% block content %}
    <div class="container-fluid">  <!-- 开加一个container的目的是为了让整体布局居中 -->
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="row">
                {% if message %}
                    <div class="alert alert-warning">{{ message }}</div>
                {% endif %}
                <div class="col-md-4 col-md-offset-4">
                    <form class='form-login' action="{% url 'vip' %}" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="form-group">
                            {{ getid.id.label }}
                            {{ getid.id }}
                        </div>

                        <button type="submit" class="btn btn-primary pull-right" id='sum'>上传</button>

                    </form>
                    <button onclick="copyinfo()">复制文本</button>
                </div>
            </div>


            <section id="editor">
                <div id='froala-editor' style="margin-top: 30px;">
{#                {{ message }}#}
                    {% for i in KWwords %}
                        {{ i }}
                    {% endfor %}
                    <br>
                    <p>
                        &nbsp;&nbsp;&nbsp;&nbsp;{{ xiaoshuotxt }}
                    </p>

                </div>
                <button id="save">保存</button>
            </section>


        </div>


    </div>

{% endblock %}

{% block script %}
        <script type="text/javascript">
        /**
         * 复制内容到粘贴板
         * content : 需要复制的内容
         * message : 复制完后的提示，不传则默认提示"复制成功"
         */
        {#    <h1>点击复制通用功能</h1>#}
        {#    <a href="https://blog.csdn.net/sunnyzyq/article/details/85065022">参考链接</a>#}
        function copyinfo() {
{#            aaa = $('#edit').froalaEditor('html.get', true);#}
            console.log(editor.html.get());
            copycontent = editor.html.get();
            aux = document.createElement("input");
            aux.setAttribute("value", copycontent);
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy");
            document.body.removeChild(aux);
        }
        function copyToClip(content, message) {
            aux = document.createElement("input");
            aux.setAttribute("value", content);
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy");
            document.body.removeChild(aux);
            if (message = null) {
                alert("不成功");

            } else {
                {#                        alert(message);#}
                abc = document.getElementById('getid');

                abc.setAttribute('value', content);
                {#                window.location.href = "http://www.tbzhu.com/vip";#}

            }
        }

    </script>

    {#文本编辑框插件开始#}
    <script src="{% static 'editor/js/froala_editor.pkgd.min.js' %}"></script>
    <script src="{% static 'editor/js/languages/zh_cn.js' %}"></script>
    <script src="{% static 'editor/js/plugins/font_family.min.js' %}"></script>

    <script>

        {#        插入#}
        FroalaEditor.DefineIcon('insertHTML', {NAME: 'plus', SVG_KEY: 'add'});
        FroalaEditor.RegisterCommand('insertHTML', {
            title: '插入段落',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                this.html.insert('222这个是你要插入的段落,支持代码<img src="{% static 'img/logo.png' %}">');
                this.undo.saveStep();
            }
        });
        FroalaEditor.DefineIcon('insertHTML', {NAME: 'plus', SVG_KEY: 'add'});
        FroalaEditor.RegisterCommand('插入自定义信息代码', {
            title: '插入代码',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                this.html.insert('<p style="text-align: center;">如何使用这个呢<img src="{% static 'img/logo.png' %}"></p>');
                this.undo.saveStep();
            }
        });

        FroalaEditor.DefineIcon('clear', {NAME: 'remove', SVG_KEY: 'remove'});
        FroalaEditor.RegisterCommand('clear', {
            title: 'Clear HTML',
            focus: false,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                this.html.set('');
                this.events.focus();
            }
        });

        editor = new FroalaEditor('div#froala-editor', {
                heightMin: 200,
                heightMax: 500,
                language: 'zh_cn',

            toolbarButtons: [
                ['bold', 'italic', 'underline', 'backgroundColor', 'emoticons','','paragraphFormat', 'align','formatOL', 'formatUL'],
                [ 'fontFamily','fontSize','textColor','backgroundColor'],
                ['insertHTML', 'undo', 'redo','clear'],
                ['插入自定义信息代码', 'undo', 'redo', 'html','clear']
            ]
        })
    </script>
    {#文本编辑框插件结束#}



{% endblock %}
